<template>
   <div class="container">
      <nav-header></nav-header>
    <!-- 面包屑 -->
    <nav-bread>
      <span>address</span>
    </nav-bread>
    <div class="checkout-addr">
      <div class="page-title-normal">
        <h2 class="page-title-h2"><span>check out</span></h2>
      </div>
      <!-- process step -->
      <div class="check-step">
        <ul>
          <li class="cur"><span>Confirm</span> address</li>
          <li><span>View your</span> order</li>
          <li><span>Make</span> payment</li>
          <li><span>Order</span> confirmation</li>
        </ul>
      </div>

      <!-- address list -->
      <div class="page-title-normal checkout-title">
        <h2><span>Shipping address</span></h2>
      </div>
      <div class="addr-list-wrap">
        <div class="addr-list">
          <ul>
            <li v-for="(item,index) in addressListMore" v-bind:class="{'check':tabCheck==index}" @click="tabCheck=index;selectAddressId=item.addressId">
              <dl>
                <dt>{{item.userName}}</dt>
                <dd class="address">{{item.streetName}}</dd>
                <dd class="tel">{{item.tel}}</dd>
              </dl>
              <div class="addr-opration addr-del">
                <a href="javascript:;" class="addr-del-btn" @click="addressDel(item.addressId)">
                  <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                </a>
              </div>
              <div class="addr-opration addr-set-default">
                <a href="javascript:;" class="addr-set-default-btn" v-if="!item.isDefault" @click="setDefault(item.addressId)"><i>Set default</i></a>
              </div>
              <div class="addr-opration addr-default" v-if="item.isDefault">Default address</div>
            </li>
            <li class="addr-new" @click="newAddress">
              <div class="add-new-inner">
                <i class="icon-add">
                  <svg class="icon icon-add"><use xlink:href="#icon-add"></use></svg>
                </i>
                <p>Add new address</p>
              </div>
            </li>
          </ul>
        </div>

        <div class="shipping-addr-more">
          <a class="addr-more-btn up-down-btn" href="javascript:;" @click="addressMore" v-bind:class="{'open':limit>3}">
            more
            <i class="i-up-down">
              <i class="i-up-down-l"></i>
              <i class="i-up-down-r"></i>
            </i>
          </a>
        </div>
      </div>

      <!-- shipping method-->
      <div class="page-title-normal checkout-title">
        <h2><span>Shipping method</span></h2>
      </div>
      <div class="lemall-msg-info hidden">
        <span>The region you selected is not within our delivery area. Please select another shipping address within our delivery areas.</span>
      </div>
      <div class="shipping-method-wrap">
        <div class="shipping-method">
          <ul>
            <li class="check">
              <div class="name">Standard shipping</div>
              <div class="price">Free</div>
              <div class="shipping-tips">
                <p>Once shipped，Order should arrive in the destination in 1-7 business days</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="next-btn-wrap">
        <a class="btn btn--m btn--red" @click="selectAddress">NEXT</a>
        <!-- <router-link class="btn btn--m btn--red" :to="{path:'/orderConfirm',query:{'addressId':selectAddressId}}" @click="selectAddress">NEXT</router-link> -->
      </div>

    </div>
     <model v-bind:mdShow="modalConfirm" v-on:close="closeModal">
      <p slot="message">
        真的要删除这个地址么？
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" @click="addressModel">确定</a>
        <a class="btn btn--m" @click="modalConfirm = false">关闭</a>
      </div>
    </model>
    <model v-bind:mdShow="addressConfirm" v-on:close="closeModal">
      <div slot="message">
        <div>
          <input type="text" style="display:none" v-model="addressId">
        </div>
        <div>
          <label for="">姓名：</label>
          <input placeholder="请输入你的姓名" v-model="userName">
        </div>
        <div>
          <label for="">电话：</label>
          <input placeholder="请输入你的电话" v-model="tel">
        </div>
         <div>
          <label for="">邮政编码：</label>
          <input placeholder="请输入你的邮政编码" v-model="postCode">
        </div>
        <div>
          <label for="">请选择地址：</label>
          <v-distpicker @selected="onSelected" v-model="streetName"></v-distpicker>
        </div>
      </div>
       <div slot="btnGroup">
        <a class="btn btn--m" @click="btn">提交</a>
        <a class="btn btn--m" @click="addressConfirm = false">关闭</a>
      </div>

    </model>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import navHeader from "@/components/Header";
import navFooter from "@/components/Footer";
import navBread from "@/components/Bread";
import model from "@/components/Model";
import axios from "axios";
import VDistpicker from "v-distpicker";
export default {
  data() {
    return {
      addressList: [],
      limit: 3,
      tabCheck: 0,
      modalConfirm: false,
      addressId: "",
      selectAddressId: "",
      addressConfirm: false,
      userName: "",
      streetName: "",
      postCode: "",
      tel: "",
      input: {}
    };
  },
  components: {
    navHeader,
    navFooter,
    navBread,
    model,
    VDistpicker
  },
  mounted() {
    this.init();
  },
  computed: {
    addressListMore() {
      return this.addressList.slice(0, this.limit);
    }
  },
  methods: {
    init() {
      axios.get("/users/addressList").then(response => {
        var res = response.data;
        console.log(res);
        if (res.status == 0) {
          this.addressList = res.result;
        } else {
        }
      });
    },
    addressDel(addressId) {
      this.addressId = addressId;
      this.modalConfirm = true;
    },
    addressModel() {
      axios
        .post("/users/addressDel", {
          addressId: this.addressId
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
            console.log("删除成功");
            this.modalConfirm = false;
            this.init();
          }
        });
    },
    addressMore() {
      if (this.limit <= 3) {
        this.limit = this.addressList.length;
      } else {
        this.limit = 3;
      }
    },
    setDefault(addressId) {
      axios
        .post("/users/setDefault", {
          addressId: addressId
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
            console.log("修改成功");
            this.init();
          }
        });
    },
    closeModal() {
      this.modalConfirm = false;
      this.addressConfirm = false;
    },

    selectAddress() {
      if (this.selectAddressId == "") {
        alert("请选择地址");
      } else {
        this.$router.push({
          path: "/orderConfirm",
          query: { addressId: this.selectAddressId }
        });
      }
    },
    //添加新的地址
    newAddress() {
      this.addressConfirm = true;
    },
    onSelected(data) {
      this.addressId = data.area.code;
      this.streetName = data.province.value + data.city.value + data.area.value;
    },
    //表单提交
    btn() {
      this.input = {
        addressId: "",
        userName: "",
        streetName: "",
        postCode: "",
        tel: ""
      };
      axios
        .post("/users/addRess", {
          addressId: this.addressId,
          userName: this.userName,
          streetName: this.streetName,
          postCode: this.postCode,
          tel: this.tel
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
            console.log("添加成功");
            this.addressConfirm = false;
            window.location.reload();
          }
        });
    }
  }
};
</script>
<style>
</style>
